import { createRouter, createWebHistory } from 'vue-router'
import BaseLayout from '../layouts/BaseLayout.vue'
import { House, Monitor, Brush, Box, Operation, PartlyCloudy, Sunny, Picture, MagicStick, Edit } from '@element-plus/icons-vue'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      redirect: '/basic/introduction',
      meta: {
        title: '首页',
        icon: House
      }
    },
    {
      path: '/basic',
      name: 'basic',
      redirect: '/basic/introduction',
      component: BaseLayout,
      meta: {
        title: '基础概念',
        icon: Monitor
      },
      children: [
        {
          path: '/basic/introduction',
          name: 'introduction',
          component: () => import('../views/basic/IntroductionView.vue'),
          meta: {
            title: 'WebGL介绍'
          }
        },
        {
          path: '/basic/canvas',
          name: 'canvas',
          component: () => import('../views/basic/CanvasView.vue'),
          meta: {
            title: 'Canvas基础'
          }
        },
        {
          path: '/basic/shader',
          name: 'shader',
          component: () => import('../views/basic/ShaderView.vue'),
          meta: {
            title: '着色器'
          }
        },
      ],
    },
    {
      path: '/matrix',
      name: 'matrix',
      redirect: '/matrix/2d',
      component: BaseLayout,
      meta: {
        title: '矩阵变换',
        icon: Operation
      },
      children: [
        {
          path: '/matrix/2d',
          name: '2d-matrix',
          component: () => import('../views/matrix/Matrix2DView.vue'),
          meta: {
            title: '二维矩阵变换'
          }
        },
        {
          path: '/matrix/3d',
          name: '3d-matrix',
          component: () => import('../views/matrix/Matrix3DView.vue'),
          meta: {
            title: '三维矩阵变换'
          }
        },
      ],
    },
    {
      path: '/shapes',
      name: 'shapes',
      redirect: '/shapes/point',
      component: BaseLayout,
      meta: {
        title: '基础图形',
        icon: Brush
      },
      children: [
        {
          path: '/shapes/point',
          name: 'point',
          component: () => import('../views/shapes/PointView.vue'),
          meta: {
            title: '点'
          }
        },
        {
          path: '/shapes/line',
          name: 'line',
          component: () => import('../views/shapes/LineView.vue'),
          meta: {
            title: '线'
          }
        },
        {
          path: '/shapes/triangle',
          name: 'triangle',
          component: () => import('../views/shapes/TriangleView.vue'),
          meta: {
            title: '三角形'
          }
        },
        {
          path: '/shapes/gradient-triangle',
          name: 'gradient-triangle',
          component: () => import('../views/shapes/GradientTriangleView.vue'),
          meta: {
            title: '渐变三角形'
          }
        },
      ],
    },
    {
      path: '/shadertoy',
      name: 'shadertoy',
      redirect: '/shadertoy/blackhole',
      component: BaseLayout,
      meta: {
        title: 'Shader玩具',
        icon: Box
      },
      children: [
        {
          path: '/shadertoy/blackhole',
          name: 'blackhole',
          component: () => import('../views/shadertoy/BlackHoleView.vue'),
          meta: {
            title: '旋转黑洞'
          }
        },
        {
          path: '/shadertoy/circle',
          name: 'circle',
          component: () => import('../views/shadertoy/CircleView.vue'),
          meta: {
            title: '炫光圆圈'
          }
        },
        {
          path: 'color-ring',
          name: 'ColorRing',
          component: () => import('../views/shadertoy/ColorRingView.vue'),
          meta: {
            title: '彩色旋转光圈'
          }
        },
        {
          path: 'glow',
          name: 'glow',
          component: () => import('../views/shadertoy/GlowView.vue'),
          meta: {
            title: '光晕效果'
          }
        },
        {
          path: 'windmill',
          name: 'windmill',
          component: () => import('../views/shadertoy/WindmillView.vue'),
          meta: {
            title: '风车效果'
          }
        },
        {
          path: 'starfield',
          name: 'starfield',
          component: () => import('../views/shadertoy/StarfieldView.vue'),
          meta: {
            title: '闪耀星际'
          }
        },
        {
          path: 'sdf-curve',
          name: 'sdf-curve',
          component: () => import('../views/shadertoy/SDFCurve.vue'),
          meta: {
            title: 'SDF曲线'
          }
        }
      ],
    },
    {
      path: '/complex',
      name: 'complex',
      redirect: '/complex/webgl-letter',
      component: BaseLayout,
      meta: {
        title: '复杂图形',
        icon: Box
      },
      children: [
        {
          path: '/complex/webgl-letter',
          name: 'webgl-letter',
          component: () => import('../views/complex/WebGLLetterView.vue'),
          meta: {
            title: 'WEBGL字母'
          }
        },
        {
          path: '/complex/snowflake',
          name: 'snowflake',
          component: () => import('../views/complex/SnowflakeView.vue'),
          meta: {
            title: '雪花图形'
          }
        },
        {
          path: '/complex/turtle-graphics',
          name: 'turtle-graphics',
          component: () => import('../views/complex/TurtleGraphicsView.vue'),
          meta: {
            title: '海龟绘图'
          }
        },
      ],
    },
    {
      path: '/simple-3d',
      name: 'simple-3d',
      redirect: '/simple-3d/cube',
      component: BaseLayout,
      meta: {
        title: '简单三维',
        icon: PartlyCloudy
      },
      children: [
        {
          path: '/simple-3d/cube',
          name: 'cube',
          component: () => import('../views/simple-3d/CubeView.vue'),
          meta: {
            title: '立方体'
          }
        },
      ],
    },
    {
      path: '/lighting',
      name: 'lighting',
      redirect: '/lighting/point-light',
      component: BaseLayout,
      meta: {
        title: '光照效果',
        icon: Sunny
      },
      children: [
        {
          path: '/lighting/point-light',
          name: 'point-light',
          component: () => import('../views/lighting/PointLight.vue'),
          meta: {
            title: '点光源'
          }
        },
        {
          path: '/lighting/directional-light',
          name: 'directional-light',
          component: () => import('../views/lighting/DirectionalLight.vue'),
          meta: {
            title: '平行光源'
          }
        }
      ],
    },
    {
      path: '/texture',
      name: 'texture',
      redirect: '/texture/basic',
      component: BaseLayout,
      meta: {
        title: '纹理贴图',
        icon: Picture
      },
      children: [
        {
          path: '/texture/basic',
          name: 'texture-basic',
          component: () => import('../views/texture/TextureCubeView.vue'),
          meta: {
            title: '基础贴图'
          }
        },
        {
          path: '/texture/cube-map',
          name: 'texture-cube-map',
          component: () => import('../views/texture/CubeMapView.vue'),
          meta: {
            title: '立方体贴图'
          }
        },
        {
          path: '/texture/normal-map',
          name: 'texture-normal-map',
          component: () => import('../views/texture/NormalMapView.vue'),
          meta: {
            title: '法线贴图'
          }
        },
        {
          path: '/texture/hdr-map',
          name: 'texture-hdr-map',
          component: () => import('../views/texture/HDRMapView.vue'),
          meta: {
            title: 'HDR贴图'
          }
        }
      ],
    },
    {
      path: '/post-processing',
      name: 'post-processing',
      redirect: '/post-processing/blur',
      component: BaseLayout,
      meta: {
        title: '后期处理',
        icon: MagicStick
      },
      children: [
        {
          path: '/post-processing/blur',
          name: 'post-processing-blur',
          component: () => import('../views/post-processing/BlurView.vue'),
          meta: {
            title: '模糊效果'
          }
        },
        {
          path: '/post-processing/edge-detection',
          name: 'post-processing-edge-detection',
          component: () => import('../views/post-processing/EdgeDetectionView.vue'),
          meta: {
            title: '边缘检测'
          }
        },
        {
          path: '/post-processing/tone-mapping',
          name: 'post-processing-tone-mapping',
          component: () => import('../views/post-processing/ToneMappingView.vue'),
          meta: {
            title: '色调映射'
          }
        },
        {
          path: '/post-processing/anti-aliasing',
          name: 'post-processing-anti-aliasing',
          component: () => import('../views/post-processing/AntiAliasingView.vue'),
          meta: {
            title: '抗锯齿'
          }
        }
      ],
    },
    {
      path: '/playground',
      name: 'playground',
      component: BaseLayout,
      redirect: '/playground/editor',
      meta: {
        title: '在线编辑器',
        icon: Edit
      },
      children: [
        {
          path: '/playground/editor',
          name: 'playground-editor',
          component: () => import('../views/playground/WebGLPlayground.vue'),
          meta: {
            title: 'WebGL编辑器'
          }
        }
      ]
    },
  ],
})

export default router
